<!--八项规定主题库-->
<template>
  <div class="app-container">
    <div class="container-menu">
      <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
    </div>
    <div class="table-container">
      <jdf-table
        v-loading="loading"
        :columns="columns"
        :pagination-attrs="paginationAttrs"
        :data="tableData"
        :pagination-events="paginationChange"
      >
      </jdf-table>
    </div>
    <!--新增弹窗-->
    <el-dialog :title="formType === NEWLY_ADDED.type ? NEWLY_ADDED.title : EDIT.title" :visible.sync="dialogFormVisible">
      <jdf-increased-form
        ref="increaseForm"
        :configs="configs"
        :data="formData"
        :formAttrs="formAttrs"
        :all-fields-readonly="allFieldsReadonly"
        :rules="rules"
      ></jdf-increased-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ResearchFormService from '@/api/domains/ResearchFormService';
import { showErrorMsg } from '@/api/utils/pc-message';
import { QUESTION_TYPE, WHETHER_ENABLE } from '@/utils/constants.js';
import listTableMixins from '@/mixins/listTableMixins';
import configManagementMixins from '@/mixins/configManagementMixins.js';
import processFormCommonMixin from '@/views/procecss-form/processFormCommonMixin';
const { DISABLED_TITLE, ENABLED_TITLE, ENABLED, DISABLED } = WHETHER_ENABLE;
const { SINGLE, TRUE_FALSE } = QUESTION_TYPE;
const {
  getQuestionConfigPage,
  delQuestionConfigDelete,
  updQuestionConfigUpdate,
  addQuestionConfigSave,
  getQuestionConfigDetail,
} = new ResearchFormService();
export default {
  mixins: [processFormCommonMixin, listTableMixins, configManagementMixins],
  data() {
    return {
      //获取表格数据
      getTable: getQuestionConfigPage,
      //删除表格数据
      deleteList: delQuestionConfigDelete,
      //更新表格数据
      updateList: updQuestionConfigUpdate,
      //新增表格数据
      addList: addQuestionConfigSave,
      //表单数据
      formData: {
        questionType: TRUE_FALSE.value, //题型
        questionSubject: '', //题目
        score: 20, //分值
        correctAnswe: '', //正确答案
        whetherEnable: ENABLED, //是否启用
        questionOptionConfigDTOS: [], //选项
      },
      //表单验证规则
      rules: {
        sort: [{ required: true, message: '请输入序号', trigger: 'blur' }],
        questionType: [{ required: true, message: '请输入题型', trigger: 'blur' }],
        questionSubject: [{ required: true, message: '请输入题目', trigger: 'blur' }],
        questionOptionConfigDTOS: [{ required: true, message: '请选择选项', trigger: 'change' }],
        correctAnswe: [{ required: true, message: '请输入正确答案', trigger: 'blur' }],
      },
      //表单配置项
      configs: [
        [
          {
            formElName: '题型',
            formElCode: 'questionType',
            editable: '1',
            colSpan: 24,
            elType: 'select',
            options: [
              {
                label: '单选题',
                value: SINGLE.value,
              },
              {
                label: '判断题',
                value: TRUE_FALSE.value,
              },
            ],
          },
        ],
        [
          {
            formElName: '题目',
            formElCode: 'questionSubject',
            editable: '1',
            colSpan: 24,
            attrs: {
              placeholder: '请输入题目',
              type: 'textarea',
              rows: 2,
            },
          },
        ],
        [
          {
            hideLabel: true,
            formElCode: 'questionOptionConfigDTOS',
            elType: 'dynamicTable',
            editable: '1',
            colSpan: 24,
            attrs: {
              // 动态表格标题
              title: '选项',
              showBtns: ['add'],
              // 标题对齐方式
              titleAlign: 'center',
              // 可展开收起
              canExpandAndFold: false,
              // 可拖拽排序
              canDragSort: true,
              // 自定义操作按钮
              operation: [
                {
                  name: 'add',
                  isShow: true,
                  order: 0,
                },
                {
                  name: 'delete',
                  isShow: true,
                  order: 1,
                },
              ],
              tableDataOption: [
                {
                  key: 'optionContent',
                  label: '选项',
                  elType: 'input',
                  rules: [{ required: true, message: '请输入选项' }],
                  attrs: {
                    placeholder: '请输入选项',
                    disabled: false,
                    showOverflowTooltip: true,
                  },
                },
              ],
            },
          },
        ],
        [
          {
            formElName: '正确答案',
            formElCode: 'correctAnswe',
            editable: '1',
            colSpan: 24,
            attrs: {
              placeholder: '请输入正确答案',
            },
          },
        ],
        [
          {
            formElName: '分值/分',
            formElCode: 'score',
            elType: 'number',
            editable: '0',
            colSpan: 24,
            appendLabel: '分',
            attrs: {
              precision: 0,
              min: 0,
            },
          },
        ],
        [
          {
            formElName: '是否启用',
            formElCode: 'whetherEnable',
            editable: '1',
            colSpan: 24,
            elType: 'select',
            attrs: {
              clearable: false,
            },
            options: [
              {
                label: '是',
                value: ENABLED,
              },
              {
                label: '否',
                value: DISABLED,
              },
            ],
          },
        ],
      ],
    };
  },
  computed: {
    /**
     * 表格列配置项
     */
    columns() {
      return [
        { label: '序号', width: 50, type: 'index', attrs: { index: index => this.startIndex + index, align: 'center' } },
        {
          label: '题型',
          width: 60,
          prop: 'questionType',
          attrs: { formatter: (row, column, cellValue) => QUESTION_TYPE[cellValue].title, align: 'center' },
        },
        { label: '题目', prop: 'questionSubject', attrs: { minWidth: 120, showOverflowTooltip: true } },
        {
          label: '选项',
          prop: 'questionOptionConfigVOS',
          attrs: {
            minWidth: 90,
            showOverflowTooltip: true,
            formatter: (row, column, cellValue) => cellValue?.map(item => item.optionContent).join(','),
          },
        },
        { label: '正确答案', prop: 'correctAnswe', attrs: { minWidth: 50, showOverflowTooltip: true, align: 'center' } },
        { label: '分值', width: 50, prop: 'score', attrs: { align: 'center' } },
        {
          label: '是否启用',
          width: 100,
          prop: 'whetherEnable',
          attrs: {
            formatter: (row, column, cellValue) => (cellValue ? ENABLED_TITLE : DISABLED_TITLE),
            align: 'center',
          },
        },
        {
          label: '操作',
          width: 150,
          render: (createElement, params) =>
            createElement('div', [
              createElement(
                'el-button',
                {
                  props: {
                    type: 'text',
                  },
                  on: {
                    click: () => {
                      this.getDeetsConfigDetail(params.row);
                      Object.assign(this, {
                        dialogFormVisible: true,
                        formType: this.EDIT.type,
                      });
                    },
                  },
                },
                '编辑',
              ),
              createElement(
                'el-button',
                {
                  props: {
                    type: 'text',
                  },
                  on: {
                    click: () => {
                      this.deletePageData({ id: params.row.id });
                    },
                  },
                },
                '删除',
              ),
            ]),
          attrs: {
            align: 'center',
          },
        },
      ];
    },
  },
  methods: {
    /**
     * 获取详情
     * @param id 详情的id
     */
    async getDeetsConfigDetail({ id }) {
      try {
        const {
          data: { data },
        } = await getQuestionConfigDetail({ id });
        this.formData = {
          ...data,
          whetherEnable: data.whetherEnable ? ENABLED : DISABLED,
          questionOptionConfigDTOS: data.questionOptionConfigVOS,
        };
      } catch (error) {
        showErrorMsg(error);
      }
    },

    /**
     * 提交表单
     */
    handleSubmit() {
      const { questionType, questionSubject, score, correctAnswe, whetherEnable, questionOptionConfigDTOS, id } = this.formData;
      const params = {
        id,
        questionType,
        questionSubject,
        score,
        correctAnswe,
        whetherEnable,
        //题目选项
        questionOptionConfigDTOS: questionOptionConfigDTOS.map(({ optionContent, rowIndex }) => ({
          optionContent,
          sort: rowIndex,
        })),
      };
      this.submitFormData(params);
    },

    /**
     * 重置表单
     */
    resetForm() {
      //默认表单数据
      const resetData = {
        //id
        id: '',
        //题型
        questionType: TRUE_FALSE.value,
        //题目
        questionSubject: '',
        //分值
        score: 20,
        //正确答案
        correctAnswe: '',
        //是否启用
        whetherEnable: ENABLED,
        //选项
        questionOptionConfigDTOS: [],
      };
      Object.assign(this.formData, resetData);
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/assets/style/configManagement.scss';
</style>
